<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <!-- <TreeHeader :title="'部门信息'"></TreeHeader>
        <div>
          <el-input
            v-model.trim="deptName"
            placeholder="请输入部门名称"
            clearable
            prefix-icon="el-icon-search"
            style="margin: 5px 0 10px 0"
          />
        </div>
        <div class="tree-container">
          <el-tree
            ref="tree"
            :data="deptOptions"
            :props="defaultProps"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
          ></el-tree>
        </div> -->
        <treeIndex :deptOptions="deptOptions" @handleNode="handleNodeClick" :title="'学院信息'"></treeIndex>
      </el-col>
      <el-col :span="20" :xs="24">
        <studentList ref="studentRef" :deptOptions="collegeSelectList"></studentList>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import studentList from "./studentInfo.vue";
// import TreeHeader from "@/components/TreeHeader/index.vue";
// import { deptTreeSelect } from "@/api/system/user";
import {
  classTree,collegeSelect
} from "@/api/information/studentInfor";
import treeIndex from "@/components/tree/index.vue";
export default {
  components: { 
    studentList,
    // TreeHeader,
    treeIndex
  },
  data() {
    return {
      tabPosition: "left",
      deptOptions: [],
      collegeSelectList: [],
      deptName: "",
      defaultProps: {
        children: "children",
        label: "label"
      },
      
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.department();
    collegeSelect().then(response => {
      // console.log('res:12313',response)
      this.collegeSelectList = response.data
  
    })
  },
  methods: {
    // tree树形选中的值
    handleNodeClick(data) {
      console.log(data, "选中的值");
      // this.deptStudentId = data.i
      this.$refs.studentRef.getList(data.id)
      this.$refs.studentRef.handleChange(data.id)

    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 获取部门信息
    async department() {
      // await deptTreeSelect().then(res => {
      //   this.deptOptions = res.data;
      // });
      await classTree().then(response => {
      console.log('res:',response)
      this.deptOptions = response.data
    })
    }
  }
};
</script>
<style scoped lang="scss">
.head-container {
  overflow-x: scroll;
}
</style>